@import '../../../styles/var';

@progress: ~'@{prefix}-progress';

.@{progress}-circle {
  position: relative;
  display: inline-block;
  vertical-align: top;

  .@{progress}-svg {
    transform: rotate(-90deg);
  }

  .@{progress}-trail {
    stroke: @section-background;
    fill: none;
  }

  .@{progress}-bg {
    stroke: @primary-color;
    fill: none;
    transition: stroke-dasharray @normal-motion linear;
  }

  .@{progress}-text {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
